/**
 * User: Paulo Fournier
 * Date: 03-08-2013
 * Map view
 */

Ext.define('Mobile-app.view.Map', {
    extend: 'Ext.Panel',
    alias: 'widget.mappanel',

    config: {
        title: $.t('main.map'),
        iconCls: 'maps',
        cls: 'maps',
        scrollable: null,
        styleHtmlContent: true,
        layout: 'fit',
        items: [
            Ext.create('Ext.Toolbar', {
                docked: 'top',
                ui: 'light',
                defaults: {
                    iconMask: true
                },
                items: [
                    {
                        iconCls: 'home',
                        handler: function () {

                            var markers = this.up('panel').markers,
                                bounds = new google.maps.LatLngBounds();
                                map = this.up('panel').down('map').getMap();

                            for(id in markers){
                                var pos = markers[id].getPosition();

                                if(pos.lat() && pos.lng())
                                    bounds.extend(pos);
                            }

                            map.fitBounds(bounds);
                        }
                    },
                    {
                        id: 'segmented',
                        xtype: 'segmentedbutton',
                        allowMultiple: true,
                        listeners: {
                            toggle: function (buttons, button, active) {

                                var mapPanel = this.up('panel').down('map');

                                if (button.id === 'trafficButton') {
                                    mapPanel.getPlugins()[1].setHidden(!active);
                                }
                                else if (button.id === 'trackingButton') {
                                    var tracker = mapPanel.getPlugins()[0],
                                        marker = tracker.getMarker();

                                    marker.setVisible(active);

                                    if (active) {
                                        tracker.setTrackSuspended(false);
                                        mapPanel.getMap().panTo(marker.getPosition());
                                    }
                                }
                            }
                        },
                        items: [
                            {
                                xtype: 'button',
                                id: 'trafficButton',
                                iconMask: true,
                                pressed: true,
                                iconCls: 'maps'
                            },
                            {
                                xtype: 'button',
                                id: 'trackingButton',
                                iconMask: true,
                                iconCls: 'locate'
                            }
                        ]
                    }
                ]
            }),

            Ext.create('Ext.Map', {
                id: 'map-main',
                mapOptions: {
                    center: new google.maps.LatLng(38.524801, -8.891029),  //nearby Setúbal
                    zoom: 12,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    }
                },

                plugins: [
                    new Ext.plugin.google.Tracker({
                        trackSuspended: true,   //suspend tracking initially
                        allowHighAccuracy: false,
                        marker: new google.maps.Marker({
                            position: new google.maps.LatLng(38.524801, -8.891029),
                            title: $.t('main.my current location'),
                            shadow: new google.maps.MarkerImage(
                                'resources/images/shadow.png',
                                new google.maps.Size(64, 52),
                                new google.maps.Point(0, 0),
                                new google.maps.Point(-5, 42)
                            ),
                            icon: new google.maps.MarkerImage(
                                'resources/images/point.png',
                                new google.maps.Size(32, 31),
                                new google.maps.Point(0, 0),
                                new google.maps.Point(16, 31)
                            )
                        })
                    }),
                    new Ext.plugin.google.Traffic()
                ],

                listeners: {
                    maprender: function (comp, map) {

                        var mappanel = this.up('mappanel');

                        Ext.defer(mappanel.fireEvent,500,mappanel,['updateMobileMarkers']);

                    }
                }
            })
        ],
        listeners: {
            painted: function (panel) {

                this.fireEvent('addOnloadListener');
            }
        }
    }

});